
<%--jsp是前端，后端是servlet--%>

<%--
  JSP页面指令：
  contentType="text/html;charset=UTF-8" - 指定响应内容类型为HTML，字符编码为UTF-8（支持中文）
  language="java" - 表示此JSP页面使用Java语言
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>项目审核页面</title>
    <%-- 引入jQuery库，版本1.8.3，位于项目根目录下的js文件夹中 --%>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        <%--
        文档就绪函数：当页面DOM结构加载完成后执行其中的代码
        这是jQuery的标准写法，确保JS代码在页面元素都准备好后才执行
        --%>
        $(document).ready(function () {
            // ==================== 第一部分：页面加载时自动查询项目详情 ====================

            /**
             * 功能：页面加载时自动根据PID查询项目详细信息
             * 流程：
             * 1. 发起GET请求到后端查询接口
             * 2. 成功后用返回的数据填充表格
             */
            /*<%-- /*// 前端说：请向 "projectInfo/queryByPid" 发送一个请求，参数是 pid=某个值
// 拿到数据后，交给 function (pro) 这个回调函数处理*/--%>*/
            $.get(
                "projectInfo/queryByPid",  // 请求URL：后端查询项目详情的接口地址
                "pid=" + $("[name='pid']").val(),  // 请求参数：拼接查询字符串，获取隐藏框中的项目ID
                function (pro) {  // 成功回调函数：pro参数是后端返回的JSON数据（项目对象）
                    // 将项目ID填充到表格第2个单元格（索引从0开始，所以eq(1)是第2个）
                    $("td:eq(1)").text(pro.pid);//下标是1，也就是第2个eq
                    // 将项目名称填充到表格第4个单元格
                    $("td:eq(3)").text(pro.pname);
                    // 将项目开始时间填充到表格第6个单元格
                    $("td:eq(5)").text(pro.startdate);
                    // 将项目结束时间填充到表格第8个单元格
                    $("td:eq(7)").text(pro.enddate);
                }
            );

            // ==================== 第二部分：审核按钮点击事件处理 ====================

            /**
             * 功能：点击审核按钮时，更新项目状态
             * 流程：
             * 1. 获取当前项目ID和选择的状态值
             * 2. 发起GET请求到后端更新接口
             * 3. 根据返回结果提示用户并跳转页面
             */
            $("[value='审核']").click(function () {
                // 获取隐藏输入框中的项目ID
                var pid = $("[name='pid']").val();
                // 获取下拉选择框中选中的状态值（1-审核中，2-已审核）
                var status = $("select").val();

                // 发起异步GET请求到后端更新接口
                $.get(
                    "projectInfo/updatePro",  // 请求URL：后端更新项目状态的接口地址
                    {"pid": pid, "status": status},  // 请求参数：以对象形式传递，包含项目ID和新状态
                    function (dt) {  // 成功回调函数：dt参数是后端返回的操作结果（通常是布尔值）
                        // 将返回数据转换为JSON字符串（此处可能用于调试，实际可省略）
                        JSON.stringify(dt);
                        // 弹出提示框：如果dt为true显示"审核成功"，否则显示"审核失败"
                        alert(dt ? "审核成功！" : "审核失败！");
                        // 无论成功与否，都跳转回项目列表页面（ajaxindex.jsp）
                        window.location.href = "ajaxindex.jsp";
                    }
                );
            });

            // 注：返回按钮未绑定点击事件，需要时可添加功能
            // $("[value='返回']").click(function() {
            //     window.location.href = "ajaxindex.jsp";
            // });
        });
    </script>
</head>
<body>
<%--
隐藏输入框：用于存储从URL参数获取的项目ID
value="<%=request.getParameter("pid")%>" - 使用JSP表达式获取URL中的pid参数值
例如：访问 ajaxUpdate.jsp?pid=1001 时，此框的value值为1001
--%>
<input type="hidden" name="pid" value="<%=request.getParameter("pid")%>">

<%-- 项目信息表格 --%>
<table>
    <caption>申报项目信息</caption> <%-- 表格标题 --%>

    <%-- 第1行：项目编号 --%>
    <tr>
        <td>项目编号</td>
        <td></td> <%-- 留空，等待JS异步填充数据 --%>
    </tr>

    <%-- 第2行：项目名称 --%>
    <tr>
        <td>项目名称</td>
        <td></td> <%-- 留空，等待JS异步填充数据 --%>
    </tr>

    <%-- 第3行：项目开始时间 --%>
    <tr>
        <td>项目开始时间</td>
        <td></td> <%-- 留空，等待JS异步填充数据 --%>
    </tr>

    <%-- 第4行：项目结束时间 --%>
    <tr>
        <td>项目结束时间</td>
        <td></td> <%-- 留空，等待JS异步填充数据 --%>
    </tr>

    <%-- 第5行：项目状态（可编辑） --%>
    <tr>
        <td>项目状态</td>
        <td>
            <%-- 下拉选择框，用于选择项目状态 --%>
            <select name="status">
                <option value="1">审核中</option> <%-- 选项1，值为1 --%>
                <option value="2">已审核</option> <%-- 选项2，值为2 --%>
            </select>
        </td>
    </tr>

    <%-- 第6行：操作按钮 --%>
    <tr>
        <td colspan="2"> <%-- 合并两列 --%>
            <input type="button" value="审核"/> <%-- 审核按钮，已绑定点击事件 --%>
            <input type="button" value="返回" /> <%-- 返回按钮，未绑定功能 --%>
        </td>
    </tr>
</table>
</body>
</html>